<template>
	<view class="login">
		<view class="main_wrap">
			<view class="logo">
				<image src="../../static/image/login_icon.png" mode=""></image>
			</view>
			<view class="title">
				{{isPhone? '数仁养怡' : '登录'}}	
				<view class="tootip_msg">
					{{isPhone ? '' : '请输入帐号及密码登录'}}
				</view>
			</view>
			<view class="form">
				<view class="username">
					<image src="../../static/image/user_icon.png" mode=""></image>
						<uni-easyinput  v-model="formData.username"  placeholder="请输入用户名" :clearable="false"></uni-easyinput>
				</view>
				<view class="password">
					<image src="../../static/image/password_icon.png" mode=""></image>
						<uni-easyinput  v-model="formData.password"  placeholder="请输入密码" type="password" :clearable="false"></uni-easyinput>
				</view>
				<view class="forgetPwd" v-if="!isPhone">
					忘记密码
				</view>
				<view class="submit" @click="submit">
				{{isPhone ? '确定' : '登录'}}	
				</view>
			</view>
		</view>

		<view class="agreement" @click="checkAgreen">
			<image :src="`../../static/image/${isChecked ?'check_true' :'check_false'}.png `"></image> 我已阅读并同意<text>《服务协议》</text>和<text>《隐私政策》</text>
		</view>
		<view class="bg">
			<image src="../../static/image/logo_bg.png" mode=""></image>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive,ref} from 'vue';
import {login,getUserPermission} from '@/api/login.js'
import {isDeviceType} from '@/hooks/deviceType.js'
const isPhone = ref(isDeviceType('phone'))
	const formData = reactive({
		username:"",//"hugong1"
		password:""
	}) 
	const isChecked = ref(false)
	const checkAgreen = ()=>{
		isChecked.value = !isChecked.value 
	} 
	const submit = async()=>{
	if(formData.username === "" || formData.password === "") return uni.showToast({
		icon:'error',
		title:formData.username === "" ? "用户名不能为空!" : formData.password === "" ? '密码不能为空！' : ""
	})
	if(!isChecked.value) return uni.showToast({
		icon:'error',
		title:"请勾选协议政策!"
	})
	try{
		const {code,data:res,msg} = await login(formData)
		if(code === 200){
		uni.setStorageSync("token",res.token)
		// 获取用户权限信息
		const {code:perCode,data:perRes} = await getUserPermission ()
		if(perCode === 200)	{
			uni.setStorageSync("permission",perRes)
			uni.showToast({
				icon:"success",
				title:"登录成功",
				duration:1000,
				complete() {
					uni.navigateTo({
						url:"/pages/index/index"
					})	
				}
			})
		}
		}else{
			uni.showToast({
				icon:'error',
				title:msg
			})
		}
	}catch(e){
		//TODO handle the exception
	}



	}
</script>

<style scoped lang="less">
.login{
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 150rpx 60rpx;
	// background-color: #f8faff;
	.main_wrap{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.logo{
			image{
			width: 168rpx;
			height: 168rpx;	
			}
			margin-bottom: 30rpx;
		}
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 48rpx;
			color: #000000;
		}
		.form{
			margin-top: 92rpx;
			width: 100%;
			.username,.password{
				padding: 0 48rpx;
				display: flex;
				align-items: center;
				margin-bottom: 44rpx;
				height: 96rpx;
				background-color: #F2F8FF;
				border-radius: 48rpx;
				>image{
				width: 32rpx;
					height: 32rpx;
				}
			}
			:deep(.is-input-border){
				border: none;
				background-color:transparent !important;
			}
			.submit{
				margin-top: 20rpx;
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 180deg, #75B7FF 0%, #147FF3 100%);
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				display: flex;
				justify-content: center;
			}
		}
	}

	.agreement{
		display: flex;
		align-items: center;
		position: absolute;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 90rpx;
		justify-content: center;
		color: #7E818C;
		font-size: 28rpx;
		>text{
			color: #333333;
		}
		>image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		
	}
	.bg{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 100vh;
		background: #F8FAFF;
		>image{
		width: 100%;
		}
	
	}
}
@media screen and (min-width: 768px) {
  /* 平板样式 */
  .login{
	  background: url("../../static/image/cash_bg.png") no-repeat center;
	  background-size: 100% 100%;
	  .main_wrap{
		  width: 40%;
		  background: #FFFFFF;
		  border-radius: 26rpx;
		  padding: 80rpx;
		  .title{
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  .tootip_msg{
				  margin-top: 7rpx;
				  font-weight: 400;
				  font-size: 32rpx;
				  color: #999999;
			  }
		  }
		  .form{
			  .username,.password{
				  height: 120rpx;
				  border-radius: 120rpx;
				  >image{
				  width: 42rpx;
				  height: 42rpx;
				  }
				 :deep(.uni-input-placeholder){
					 font-size: 38rpx;
				 }
				 :deep(.uni-input-input){
					font-size: 38rpx;
				 }
			  }
			  .forgetPwd{
				  text-align: right;
				  font-weight: 400;
					font-size: 38rpx;
				  color: #666666;
				  margin-bottom: 32rpx;
			  }
			  .submit{
				 height: 120rpx;
				 border-radius: 120rpx;
				 line-height: 120rpx;
				 font-size: 38rpx;
				  margin-bottom: 60rpx;
				  background: linear-gradient( 90deg, #8F70F1 0%, #2382FB 100%);
				  
			  }
		  }
	  }
  }
}
</style>
